<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 定义旋转动画 */
			@keyframes rotateAnimation {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			* {
				padding: 0;
				margin: 0;
				-webkit-user-select: none;
				/* Safari */
				-moz-user-select: none;
				/* Firefox */
				-ms-user-select: none;
				/* IE10+/Edge */
				user-select: none;
				/* 标准语法 */
			}

			body,
			html {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#main-loading {
				width: 300px;
				height: 200px;
				background-color: #3d3d3d;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.logo {
				width: 80px;
				height: 80px;
				background-image: url('../../logo.png');
				background-position: center;
				background-size: 100% 100%;
				animation: rotateAnimation 5s linear infinite;
			}

			.info {
				color: #ccc;
				font-size: 13px;
				padding-top: 12px;
			}
		</style>
	</head>
	<body>
		<div id="main-loading">
			<div class="logo"></div>
			<div class="info"></div>
		</div>
	</body>
	<script>
		window.onload = async () => {
			for (const item of textList) {
				await writeTxt(item.value, item.time)
			}
			document.querySelector('.info').innerHTML = '正在初始化数据..'
		}

		const textList = [{
				value: '正在准备，请等待..',
				time: 1500
			},
			{
				value: '检测软件环境中..',
				time: 4000
			},
			{
				value: '创建本地缓存关系..',
				time: 1500
			},
			{
				value: '创建本地数据库中..',
				time: 4000
			}
		]

		const writeTxt = (text, time) => {
			return new Promise(resolve => {
				console.log('document', document.querySelector('.info'))
				document.querySelector('.info').innerHTML = text
				setTimeout(() => {
					resolve()
				}, time)
			})
		}
	</script>
</html>